<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>短信审核及发送</title>
    <link rel="stylesheet" href="static/common-page.css">
    <link rel="stylesheet" href="static/themes/gray/easyui.css">
    <link rel="stylesheet" href="static/themes/iconfont/iconfont.css">
    <script src="static/js/jquery.min.js"></script>
    <script src="static/js/jquery.easyui.min.js"></script>
    <script src="static/js/easyui-lang-zh_CN.js"></script>
    <script src="static/js/layer/layer.js"></script>
    <script src="static/js/moment.js"></script>
    <!--    <script src="static/js/dayjs.min.js"></script>-->
</head>
<body>
<div id="datagrid1"></div>
<div id="toolbar1">
    <div style="margin:5px 0 0 25px;">
        <div class="form-control">
            <input id="text_keywords" type="text" class="form-control-text-input">
        </div>
        <div class="form-control">
            <button id="button_search" type="button" class="form-control-button form-control-button--primary">
                <i class="iconfont icon-search1 button-icon"></i>搜索
            </button>
        </div>
        <div class="form-control">
            <button id="button_add" type="button" class="form-control-button form-control-button--primary">
                <!--<i class="iconfont icon-search1 button-icon"></i>-->新增
            </button>
        </div>
    </div>
</div>
<div class="easyui-window" id="window1"
     data-options="title:'修改信息',width:400,height:300,
     closed:true,
     modal: true,
     collapsible:false,
     minimizable:false,
     maximizable:false,
     resizable:false"
>
    <div class="easyui-layout" fit="true" border="false">
        <div region="center" border="false">
            <div style="margin:35px 0 0 25px;">
                <form action="" id="form_valid1">
                    <div>
                        <div class="form-control">
                            <div class="form-control" style="width:80px;text-align:right;">
                                真实姓名：
                            </div>
                            <div class="control-item">
                                <input id="input_userName" type="text" name="userName"
                                       class="form-control-text-input easyui-validatebox"
                                       data-options="required:true,missingMessage:'请输入真实姓名'"/>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="form-control">
                            <div class="form-control" style="width:80px;text-align:right;">
                                手机号码：
                            </div>
                            <div class="control-item">
                                <input id="input_mobilePhone" type="text" name="mobilePhone"
                                       class="form-control-text-input easyui-validatebox"
                                       data-options="validType:['isMobile'],required:true,missingMessage:'请输入手机号码'"/>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="form-control">
                            <div class="form-control" style="width:80px;text-align:right;">
                                用户组：
                            </div>
                            <div class="control-item">
                                <input id="input_userGroupName" type="text" name="userGroupName"
                                       class="form-control-text-input easyui-combobox"
                                       data-options="height:32,width:202,required:true,missingMessage:'请选择用户组'"/>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div region="south" border="false" style="height:45px;overflow: hidden;text-align: right;">
            <div class="form-control" style="margin-right:20px;">
                <button id="button2" type="button" class="form-control-button form-control-button--primary">
                    <i class="iconfont icon-fasong1 button-icon"></i>确定
                </button>
            </div>
        </div>
    </div>
</div>
<script>
$.extend($.fn.validatebox.defaults.rules, {
    isMobile: {
        validator: function(value, param) {
            return /^1[3|4|5|6|7|8|9][0-9]{9}$/.test(value)
        },
        message: '手机号码格式不正确'
    }
});
$(function() {
    var pageMethods = {
        currRow: null,
        // 编辑弹窗
        editDialog: function(row) {
            this.currRow = row
            $('#window1').window('open');
            $('#input_mobilePhone').val('')
            $('#input_userGroupName').combobox('setValue', '')
            $('#input_userName').val('')
            if (!$.isEmptyObject(row)) {
                $('#input_mobilePhone').val(row.mobilePhone)
                $('#input_userGroupName').combobox('setValue', row.userCode)
                $('#input_userName').val(row.userName)
            }
            $('#form_valid1').form('validate')
        },
        // 提交修改
        saveRow: function() {
            if ($('#form_valid1').form('validate')) {
                this.currRow.mobilePhone = $('#input_mobilePhone').val()
                this.currRow.userCode = $('#input_userGroupName').combobox('getValue')
                this.currRow.userName = $('#input_userName').val()
                $.post('url', this.currRow, function() {
                    $.messager.alert('保存成功');
                    $('#window1').window('close');
                    $('#datagrid1').datagrid('reload');
                }, 'json')
            }
        },
        // 搜索
        searchList: function() {
            $('#datagrid1').datagrid('reload', { keywords: $('#text_keywords').val() });
        },
        // 删除记录
        deleRow: function(id) {
            $.messager.confirm('提示', '确定删除吗?', function(yes) {
                if (yes) {
                    // alert(rowid)
                    $.get('', { id: id }, function() {
                        $.messager.alert('删除成功');
                        $('#datagrid1').datagrid('reload');
                    }, 'json')
                }
            })
        }
    }
    // 修改
    $(document).on('click', '.form-control-button-edit', function() {
        var rowindex = $(this).data('rowindex');
        var rows = $('#datagrid1').datagrid('getRows');
        var row = rows[rowindex];
        pageMethods.editDialog(row);
    })
    // 新增
    $('#button_add').click(function() {
        pageMethods.editDialog({});
    })
    // 删除
    $(document).on('click', '.form-control-button-delete', function() {
        var rowid = $(this).data('rowid');
        pageMethods.deleRow(rowid);
    })
    // 保存修改
    $('#button2').click(function() {
        pageMethods.saveRow()
    })
    // 搜索
    $('#button_search').click(function() {
        pageMethods.searchList()
    })
    // 用户组下拉
    $('#input_userGroupName').combobox({
        url: 'data/userGroup.json'
    })
    $('#datagrid1').datagrid({
        url: 'data/datagrid2.json',
        toolbar: '#toolbar1',
        singleSelect: true,
        fit: true,
        fitColumns: true,
        queryParams: { keywords: '' },
        columns: [
            [
                { field: 'userName', title: '真实姓名', width: 150, align: 'center' },
                { field: 'mobilePhone', title: '手机号码', width: 150, align: 'center' },
                { field: 'userGroupName', title: '用户组名称', width: 150, align: 'center' },
                {
                    field: 'opt', title: '操作', width: 60, align: 'center', formatter: function(value, row, index) {
                        return '' +
                            '<button class="form-control-button small form-control-button-edit" type="button" style="margin-right:15px;" data-rowindex="' + index + '">修改</button>' +
                            '<button class="form-control-button small form-control-button-delete form-control-button--danger" type="button" data-rowid="' + row.id + '">删除</button>'
                    }
                }
            ]
        ]
    })
})
</script>
</body>
</html>
